<template>
	<layout>
		<u-sticky bgColor="#fff">
			<u-search placeholder="搜索" :showAction="false" disabled @click="goSearch"></u-search>
			<u-tabs :list="tabsList" @change="onTabChange" :current="tabIndex"></u-tabs>
		</u-sticky>
		<view class="body">
			<view class="tab" v-show="tabIndex === 1">
				<view class="banner">
					<u-scroll-list indicator indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
						<view class="banner-item" v-for="item in hotFoods" :key="item.id" @click="goDetail(item.id)">
							<u--image :showLoading="true" :src="item.url" width="600rpx" height="600rpx"></u--image>
							<view class="banner-title">
								<view class="title">{{ item.title }}</view>
								<view class="name">{{ item.name }}</view>
							</view>
							<view class="banner-like">
								<u-icon name="heart-fill" :color="item.isLike ? '#ff5454' : 'rgba(255,255,255,.6)'"
									size="100rpx"></u-icon>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
		</view>
	</layout>
</template>

<script>
	export default {
		data() {
			return {
				// 固定tab页
				fixTabsList: [{
						id: 1,
						name: '关注'
					},
					{
						id: 2,
						name: '今日推荐'
					},
					{
						id: 3,
						name: '每周餐单'
					},
					{
						id: 4,
						name: '会员专属'
					},
					{
						id: 5,
						name: '排行榜'
					}
				],
				// 动态添加的tab页
				addTabsList: [],
				tabIndex: 1,
				hotFoods: []
			}
		},
		onLoad() {
			this.init()
		},
		computed: {
			tabsList() {
				return [...this.fixTabsList, ...this.addTabsList]
			}
		},
		methods: {
			// 初始化
			init() {
				this.getTabsList()
				this.getHotFoods()
			},
			// 获取tabs列表
			getTabsList() {
				// 请求tab列表，添加在固定tab后
				this.addTabsList = [{
						id: 6,
						name: '早餐达人'
					},
					{
						id: 7,
						name: '新手不翻车'
					},
					{
						id: 8,
						name: '家常菜能手'
					}
				]
			},
			// 获取首页热门菜品列表
			getHotFoods() {
				this.hotFoods = [{
						id: 1,
						title: '@对象给你做',
						name: '草莓巧克力',
						url: 'https://up.enterdesk.com/photo/2009-11-25/enterdesk.com-180ED980632548D3F7A59FA1F0DF7BBE.JPG',
						isLike: false
					},
					{
						id: 2,
						title: '雪天的第一顿暖锅',
						name: '冰雪煮羊',
						url: 'https://up.enterdesk.com/photo/2009-11-25/enterdesk.com-180ED980632548D3F7A59FA1F0DF7BBE.JPG',
						isLike: true
					},
					{
						id: 3,
						title: '吃点不一样的~',
						name: '枣泥核桃蛋月烧月饼',
						url: 'https://up.enterdesk.com/photo/2009-11-25/enterdesk.com-180ED980632548D3F7A59FA1F0DF7BBE.JPG',
						isLike: false
					},
				]
			},
			// 跳转搜索页
			goSearch() {
				console.log('点击了搜索');
				uni.navigateTo({
					url: "/pages/search/search",
					animationType: "slide-in-top"
				})
			},
			// 跳转菜品详情页
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/foodDetail/foodDetail?id=${id}`,
					animationType: "zoom-fade-out"
				})
			},
			onTabChange(tab) {
				if(this.tabIndex === tab.index) return
				this.tabIndex = tab.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		margin-top: 10rpx;

		.banner-item {
			position: relative;
			margin-right: 20rpx;

			.banner-title {
				position: absolute;
				box-sizing: border-box;
				top: 0;
				left: 0;
				width: 100%;
				background-color: rgba(255, 170, 0, 0.6);
				color: #fff;
				padding: 20rpx;

				.title {
					font-size: 40rpx;
				}

				.name {
					font-size: 60rpx;
				}
			}

			.banner-like {
				position: absolute;
				bottom: 20rpx;
				left: 20rpx;
			}
		}
	}
</style>